import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { ShoppingCart, Cat } from "lucide-react";
import avatar from "@/assets/avatar.png";
import { Link, Navigate, useNavigate } from 'react-router-dom';
import { ModeToggle } from '@/components/mode-toggle';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useAuth } from "@/context/AuthContext"; 
import { userService } from "@/service/userService";

interface HeaderProps {
  nickname: string;
  avatarUrl?: string;
}

export default function Header({ nickname, avatarUrl = avatar }: HeaderProps) {
  const { user } = useAuth(); // 获取用户信息
  const navigate = useNavigate();
  return (
    <header className="border-b sticky top-0 z-40 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between py-4">
        <div className="flex items-center gap-2">
          <Link to="/" className='flex justify-center gap-1' replace>
            <Cat className="ml-2 h-8 w-8" />
            <span className="text-xl font-bold">Nekonomics</span>
          </Link>
        </div>

        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" className="relative">
            <Link to="/mall/cart" replace>
              <ShoppingCart className="h-6 w-6" />
            </Link>
            {/* <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">0</span> */}
          </Button>
          <ModeToggle />
          <div className="flex items-center gap-2 mr-4">

            {/* <Link to="/mall/profile" replace>
              <Avatar>
                <AvatarImage src={avatarUrl} alt={nickname} />
                <AvatarFallback>{nickname.slice(0, 2).toUpperCase()}</AvatarFallback>
              </Avatar>
            </Link>
            <span className="text-sm font-medium">{nickname}</span> */}


            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <div className="flex items-center gap-2 cursor-pointer">
                  <Avatar>
                    <AvatarImage src={avatarUrl} alt={nickname} />
                    <AvatarFallback>{nickname.slice(0, 2).toUpperCase()}</AvatarFallback>
                  </Avatar>
                  <span className="text-sm font-medium">{nickname}</span>
                </div>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem asChild className="flex justify-center">
                  <Link to="/mall/profile">个人资料</Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild className="flex justify-center">
                  <Link to="/mall/orders">我的订单</Link>
                </DropdownMenuItem>
                {user?.role === 'seller' && (
                  <DropdownMenuItem asChild className="flex justify-center">
                    <Link to="/merchant/dashboard">商户面板</Link>
                  </DropdownMenuItem>
                )}
                <DropdownMenuSeparator />
                <DropdownMenuItem className="flex justify-center h-8">
                  <Button variant="ghost" onClick={() => {userService.logout(); navigate("/auth")}}>退出登录</Button>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>
    </header>
  );
}




